import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { Zap, BarChart, Bot } from 'lucide-react';

const DetailedFeatures = () => {
  const features = [
    {
      icon: <BarChart />,
      title: '智能分析：洞察先机，精准决策',
      description: '红小匠·AI 深度剖析小红书平台的动态数据，将复杂的流量、用户行为、内容趋势转化为直观的、可行动的洞察。我们不仅仅是展示数据，更是为您解读数据背后的故事，助您在内容创作和账号运营的每一步都胸有成竹。',
      points: [
        { name: '账号健康度诊断', detail: '全面扫描账号活跃度、内容垂直度、粉丝互动质量，提供可执行的优化建议，让您的账号始终保持最佳状态。' },
        { name: '爆款内容解码', detail: '智能分析近期爆款笔记的选题、结构、关键词和视觉元素，为您揭示下一个爆款的成功秘诀。' },
        { name: '用户画像分析', detail: '精准描绘您的粉丝画像，包括兴趣、活跃时段、消费偏好，让您的内容精准触达目标受众。' }
      ],
      image: '/src/assets/feature-1.png'
    },
    {
      icon: <Bot />,
      title: 'AI创作：释放创意，效率倍增',
      description: '告别灵感枯竭和耗时的文案撰写。红小匠·AI 的创作引擎，基于海量优质小红书内容训练，能够一键生成符合平台风格、引人入胜的文案和标题。从初稿到润色，AI是您最得力的创作伙伴。',
      points: [
        { name: '智能文案生成', detail: '输入核心关键词或主题，AI即可生成多种风格的高质量文案初稿，为您节省90%的构思时间。' },
        { name: '爆款标题打造', detail: '智能推荐高点击率的标题模式，结合热点和用户心理，让您的笔记在信息流中脱颖而出。' },
        { name: '内容灵感库', detail: '实时追踪全网热点及小红书热门话题，提供源源不断的创作灵感，让您总能快人一步。' }
      ],
      image: '/src/assets/feature-2.png'
    },
    {
      icon: <Zap />,
      title: '数据洞察：掌握趋势，领跑赛道',
      description: '在信息爆炸的小红书，数据是您最强大的武器。红小匠·AI为您构建了强大的数据中心，实时监控平台大盘、行业动态和竞品表现，将您从繁琐的数据收集中解放出来，聚焦于核心的运营策略。',
      points: [
        { name: '行业与品类追踪', detail: '监控特定行业或细分品类的热门内容、增长趋势和消费热点，助您快速切入蓝海市场。' },
        { name: '竞品策略分析', detail: '深度分析竞争对手的爆款策略、流量结构和粉丝互动模式，取长补短，制定差异化竞争策略。' },
        { name: '关键词与话题监控', detail: '实时监控关键词热度变化和新兴话题，帮助您精准布局内容，抢占流量先机。' }
      ],
      image: '/src/assets/feature-3.png'
    }
  ];

  return (
    <section id="features" className="detailed-features">
      <div className="container">
        <div className="features-header">
          <h2 className="features-title">三大核心能力，重塑您的小红书运营</h2>
          <p className="features-subtitle">从数据洞察到AI创作，我们为您提供全周期运营支持，让成功变得更简单。</p>
        </div>
        <div className="features-list-container">
          {features.map((feature, index) => {
            const [ref, inView] = useInView({
              triggerOnce: true,
              threshold: 0.2,
            });

            return (
              <motion.div
                ref={ref}
                key={index}
                className={`feature-item ${index % 2 === 1 ? 'reversed' : ''}`}
                initial={{ opacity: 0, y: 50 }}
                animate={inView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.6, delay: 0.1 }}
              >
                <div className="feature-image">
                  <div className="image-placeholder">{feature.icon}</div>
                </div>
                <div className="feature-content">
                  <h3>{feature.title}</h3>
                  <p>{feature.description}</p>
                  <ul>
                    {feature.points.map((point, pIndex) => (
                      <li key={pIndex}>
                        <strong>{point.name}</strong>
                        <span>{point.detail}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </motion.div>
            )
          })}
        </div>
      </div>
    </section>
  );
};

export default DetailedFeatures; 